<template>
  <div class="parent">
    <h2>父级路由组件</h2>
    <p>这是一个父级路由组件，可以包含子路由</p>
    
    <div class="children-nav">
      <h3>子路由导航</h3>
      <div class="nav-links">
        <a href="#" @click.prevent="activeChild = 'child1'">子路由1</a> | 
        <a href="#" @click.prevent="activeChild = 'child2'">子路由2</a>
      </div>
    </div>
    
    <div class="child-view">
      <!-- 在实际应用中，这里会是 <router-view></router-view> -->
      <component :is="currentChildComponent" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';

const activeChild = ref('child1');

const currentChildComponent = computed(() => {
  return activeChild.value === 'child1' ? Child1 : Child2;
});
</script>

<style scoped>
.parent {
  padding: 20px;
  background-color: #e8f7f0;
  border-radius: 5px;
}

.children-nav {
  margin: 15px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 3px;
}

.child-view {
  margin-top: 15px;
  padding: 15px;
  border: 1px dashed #aaa;
  border-radius: 3px;
}
</style> 